<template>
	<div class="videos w-100 h-100 d-flex flex-column px-5 py-4">
		<HorizontalNav v-model:navs="navs" />
		<VideosGroupRow
			empty="全部视频"
			:categoryList="categoryList"
			@onClickCurrent="groupVisible = !groupVisible"
			@onClickCat="
				(item) => {
					groupId = item.id;
				}
			"
		>
			<template #panel>
				<VideoGroupPanel @confirm="confirmGroup" @click.stop v-model:groupId="groupId" v-model:visible="groupVisible" />
			</template>
		</VideosGroupRow>
		<div class="flex-grow-1">
			<div class="container h-100">
				<div class="h-100 row d-flex flex-column align-items-center">
					<div class="h-100 col-xxl-10 containerCol">
						<VideoList style="max-height: calc(100vh - 75px - 60px - 38px - 40px - 3.3rem)" class="pt-5" v-model:id="groupId" />
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
import { getCategoryListApi, getGroupListApi } from "@/api/video";
import { AxiosResponseProps } from "@/utils/request";
import useClickDocument from "@/hooks/useClickDocument";
export default defineComponent({
	setup() {
		const state = reactive({
			navs: [
				{
					title: "视频",
					active: true,
				},
				{
					title: "MV",
				},
			],
			categoryList: [],
			groupId: 0,
			groupVisible: false,
			groupList: [{ name: "全部视频", id: 0 }],
		});
		state.navs = state.navs.map((item, index) => ({ ...item, key: index }));
		const getCategoryListAndGroupList = () => {
			getCategoryListApi().then((res: AxiosResponseProps) => {
				if (res.code === 200) {
					state.categoryList = res.data;
				}
			});
			getGroupListApi().then((res: AxiosResponseProps) => {
				if (res.code === 200) {
					state.groupList = [{ name: "全部视频", id: 0 }].concat(res.data);
				}
			});
		};
		getCategoryListAndGroupList();
		useClickDocument(() => {
			state.groupVisible = false;
		});
		const confirmGroup = (item) => {
			state.groupId = item.id;
		};
		return {
			...toRefs(state),
			confirmGroup,
		};
	},
});
</script>

<style scoped lang="scss"></style>
